<template>
    <div class="listingRecord">
        <div class="product_list_serch-text">
            <van-search class="product_list_serch1" v-model="searchValue" shape="round" background="#F6FAFF"
                placeholder="请输入库存编码/商品名称" />
            <div class="product_list_serch2">
                <div>
                    <van-button class="product_list-btn" round @click="onSearch">搜索</van-button>
                </div>
                <div class="product_list-btn-screen" @click="handleListFlag">
                    <div class="product_list-btn-screen-image"></div>
                    <div class="product_list-btn-screen-text">筛选</div>
                </div>
            </div>
        </div>
        <div class="mongolian_layer" v-show="showTop">
            <div class="mongolian_layer_options">
                <div class="mongolian_layer_div">
                    <div class="title">货架类型</div>
                    <div class="shelf_type">
                        <div v-for="(item, index) in shelfList" :key="index" @click="shelfClick(index, item.dictValue)"
                            :class="shelfIndex !== index ? 'shelf_div' : 'shelf_div_avtive'">
                            {{ item.dictLabel }}
                        </div>
                    </div>
                    <div class="title">下架时间</div>
                    <div class="date_shelf">
                        <div v-for="(item, index) in dataList" :key="index" class="date_shelf_div" @click="datePicker">
                            <van-image :src="complement" class="menu_cions" />
                            <div class="title">{{ computPlace(item, index) }}</div>
                        </div>
                        <div class="div">至</div>
                    </div>
                    <van-calendar v-model:show="pickerShow" type="range" @confirm="onConfirm" :allow-same-day="true"
                        :min-date="minDate" :max-date="maxDate" ref="calendarRef" />
                    <div class="title">产品部门</div>
                    <div class="shelf_type anthor_type">
                        <div @click="deptClick(index, item.deptId)" v-for="(item, index) in deptList" :key="index"
                            :class="deptIndex !== index ? 'shelf_div' : 'shelf_div_avtive'">
                            {{ item.deptName }}
                        </div>
                    </div>
                    <div class="title">下架人</div>
                    <div class="shelf_type anthor_type anthor_types">
                        <div v-for="(item, index) in recruiterList" :key="index" class="anthor_type_div">
                            <div @click="recruiterClick(index, item.userId)"
                                :class="recruiterIndex !== index ? 'shelf_div' : 'shelf_div_avtive'">
                                {{ item.nickName }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="buttons">
                    <div class="reset" @click="reset">重置</div>
                    <div class="submit" @click="submit">完成</div>
                </div>
            </div>
            <div class="mongolian_layer_layer"></div>

        </div>
        <div class="screen">
            <div class="screen_div" v-for="(item, index) in screenList" :key="index" @click="screenClick(index)">
                <div class="screen_child">{{ item.title }}</div>
                <div class="screen_icon">
                    <img :src="computScreen(index)" class="screen_icons" />
                    <img :src="computScreens(index)" class="screen_icons" />
                </div>
            </div>
        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                <template v-slot:finished>
                    <div class="nothing_div" v-if="list.length == 0 && !refreshing">
                        <van-image :src="nothingData"></van-image>
                        <div class="nothing_font">暂无数据</div>
                    </div>
                </template>
                <div class="product_list_van_list">
                    <div class="conent_pre" v-for="(item, index) in list" :key="index">
                        <div class="conent_pre_header">
                            <div class="conent_pre_img">
                                <van-image :src="item.productImage + '?x-oss-process=image/resize,w_300'"
                                    v-if="item.productImage" @click="enlargeImage(item.productImage)">
                                    <div class="liveStreamingMechanisms"
                                        v-if="item.hmMechanismsList[1]?.cooperationMode">
                                        多机制
                                    </div>
                                </van-image>
                                <van-image :src="errImg" v-else></van-image>
                            </div>
                            <div class="conent_pre_des">
                                <div class="contnt_title">
                                    <div class="contnt_styleName">
                                        {{ item.styleName }}
                                    </div>
                                    <div class="inventory">{{ item.dictLabel }}</div>
                                </div>
                                <div class="contnt_bottom">
                                    <div class="inventory">下架人：{{ item.stockName }}</div>
                                    <div class="goodShelves_colors">{{ item.locationName }}</div>
                                </div>
                                <div class="contnt_mechanism">
                                    下架时间： {{ item.createTime }}
                                    <div class="more" @click="moreClcik(item)">更多<van-icon name="arrow"
                                            color="#B8BECA" />
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { showImagePreview, type CalendarInstance } from 'vant';
import { getEnvValue } from "@/utils/index";
import { getDicts } from '@/api/productList/index'
import { getStickProductDept, getUserProductList, getOffRecordList } from '@/api/productHome/index'
import { useRouter } from 'vue-router';
const router = useRouter()
const errImg = new URL("@/assets/home/error.png", import.meta.url).href;
const complement = new URL("@/assets/productHome/icon_riqi.png", import.meta.url).href;
const huiseshangsanjiao = new URL("@/assets/productHome/icon_huiseshangsanjiao.png", import.meta.url).href;
const huisexiasanjiao = new URL("@/assets/productHome/icon_huisexiasanjiao.png", import.meta.url).href;
const heiseshangsanjiao = new URL("@/assets/productHome/icon_heiseshangsanjiao.png", import.meta.url).href;
const heisexiasanjiao = new URL("@/assets/productHome/icon_heisexiasanjiao.png", import.meta.url).href;
const nothingData = new URL("@/assets/porduct/icon_zanwushuju.png", import.meta.url).href
// 库存编码
const searchValue = ref('')
// 筛选
const showTop = ref(false)
// 货架类型index
const shelfIndex = ref()
// 产品部index
const deptIndex = ref()
// 上架人 index
const recruiterIndex = ref()
// 货架类型
const shelfList = ref<any>([])
const dataList = ref([
    '起始时间', '结束时间'
])
// 产品部门
const deptList = ref()
// 上架人
const recruiterList = ref<any>([])
// 日期展示
const pickerShow = ref(false)
// 开始时间
const startTime = ref()
// 结束时间
const endTime = ref()

// 自定义日期范围
const minDate = new Date('2010/01/01')
const maxDate = new Date('2050/12/31')

// 日期ref
const calendarRef = ref<CalendarInstance>();
// 筛选集合
const screenList = ref([
    { title: '下架时间' },
    { title: '库存数量' },
])
// rice上升 dic下降
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    content: '',
    offShelfTimeSort: '2',// 1 升序 2 降序
    stockNum: '',
    stockType: 2
});

// 列表
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const list = ref<any[]>([]);
// 限制连续刷新数据重复问题
const refreFlag = ref(true)

/** 获取货架类型 */
const getDict = async () => {
    const res = await getDicts('hm_stock_shelves_type')
    shelfList.value = res.data
}
getDict()
/** 筛选点击事件 */
const screenClick = (index: number) => {
    if (index == 0) {
        if (queryParams.value.offShelfTimeSort == '2') {
            queryParams.value.offShelfTimeSort = '1'
        } else {
            queryParams.value.offShelfTimeSort = '2'
        }
        queryParams.value.stockNum = ''
    } else if (index == 1) {
        if (queryParams.value.stockNum == '2') {
            queryParams.value.stockNum = '1'
        } else {
            queryParams.value.stockNum = '2'
        }
        queryParams.value.offShelfTimeSort = ''
    }
    onRefresh();
}
/** 筛选上升点击事件 */
const computScreen = (index: number) => {
    if (index == 0) {
        if (queryParams.value.offShelfTimeSort == '2') {
            return heiseshangsanjiao
        } else if ((queryParams.value.offShelfTimeSort == '1')) {
            return huiseshangsanjiao
        } else {
            return huiseshangsanjiao
        }
    } else if (index == 1) {
        if (queryParams.value.stockNum == '2') {
            return heiseshangsanjiao
        } else if (queryParams.value.stockNum == '1') {
            return huiseshangsanjiao
        } else {
            return huiseshangsanjiao
        }
    }
}
/** 筛选下降点击事件 */
const computScreens = (index: number) => {
    if (index == 0) {
        if (queryParams.value.offShelfTimeSort == '2') {
            return huisexiasanjiao
        } else if (queryParams.value.offShelfTimeSort == '1') {
            return heisexiasanjiao
        } else {
            return huisexiasanjiao
        }
    } else if (index == 1) {
        if (queryParams.value.stockNum == '2') {
            return huisexiasanjiao
        } else if (queryParams.value.stockNum == '1') {
            return heisexiasanjiao
        } else {
            return huisexiasanjiao
        }
    }
}

/** 货架类型点击 */
const shelfClick = (index: number, dictValue: string) => {
    if (shelfIndex.value == index) {
        shelfIndex.value = undefined
        queryParams.value.shelvesType = undefined
    } else {
        shelfIndex.value = index
        queryParams.value.shelvesType = dictValue
    }
}
/** 获取产品部门 */
const getanchor = async () => {
    const res = await getStickProductDept()
    deptList.value = res.data
}
getanchor()
/** 产品部门点击 */
const deptClick = async (index: number, deptId: string) => {
    if (deptIndex.value == index) {
        deptIndex.value = undefined
        recruiterList.value = []
        recruiterIndex.value = undefined
        queryParams.value.stockDeptId = undefined
    } else {
        deptIndex.value = index
        const res = await getUserProductList({ deptId: deptId })
        recruiterList.value = res.data
        recruiterIndex.value = undefined
        queryParams.value.stockDeptId = deptId
    }
}

/** 上架人点击 */
const recruiterClick = (index: number, userId: string) => {
    if (recruiterIndex.value == index) {
        recruiterIndex.value = undefined
        queryParams.value.stockUserId = undefined
    } else {
        recruiterIndex.value = index
        queryParams.value.stockUserId = userId
    }
}

/** 筛选 */
const handleListFlag = () => {
    showTop.value = !showTop.value
}
/** 上架时间点击事件 */
const datePicker = () => {
    pickerShow.value = true
}
const formatDate = (date) => `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
/** 日期选择 */
const onConfirm = (values) => {
    const [start, end] = values;
    pickerShow.value = false
    startTime.value = formatDate(start)
    endTime.value = formatDate(end)
    queryParams.value.outStartTime = startTime.value
    queryParams.value.outEndTime = endTime.value
}
/** 日期回显 */
const computPlace = (item: string, index: number) => {
    if (index == 0) {
        if (startTime.value) {
            return startTime.value
        } else {
            return item
        }
    } else if (index == 1) {
        if (endTime.value) {
            return endTime.value
        } else {
            return item
        }
    }
}
/** 重置 */
const reset = () => {
    shelfIndex.value = undefined
    startTime.value = undefined
    endTime.value = undefined
    deptIndex.value = undefined
    recruiterIndex.value = undefined
    calendarRef.value?.reset();

    queryParams.value = {
        pageNum: 1,
        pageSize: 10,
        content: '',
        offShelfTimeSort: '1',
        stockNum: '',
        stockType: 2
    }
}
/** 完成 */
const submit = () => {
    showTop.value = false
    onRefresh();
}
/** 更多跳转 */
const moreClcik = (item: any) => {
    router.push({
        path: '/shelvesStatusDrtails',
        query: {
            title: '下架详情',
            id: item.id
        }
    })
}
/** 库存编码搜索 */
const onSearch = () => {
    queryParams.value.content = searchValue.value;
    onRefresh();
};

/** 图片放大 */
const enlargeImage = (img: string) => {
    if (img) {
        showImagePreview({
            images: [img],
        });
    }
};

/** 查询商品列表 */
const getList = async () => {
    const res = await getOffRecordList(queryParams.value);
    for (let index = 0; index < res.rows.length; index++) {
        if (res.rows[index].productImage) {
            const real_src = res.rows[index].productImage.split(",");
            res.rows[index].productImage = getEnvValue("VITE_APP_PIC_URL") + real_src[0]
        }
    }
    refreFlag.value = true
    // 空数据 停止加载
    if (res.rows.length == 0) {
        list.value = [];
        finished.value = true;
        return;
    }
    // 有数据 赋值列表 加载状态结束
    res.rows.forEach((item) => {
        finished.value = false;
        list.value.push(item);
    });
    loading.value = false;
    refreshing.value = false;
    // 如果list长度大于等于总数据条数，数据全部加载完成
    if (list.value.length >= res.total) {
        finished.value = true; //结束加载
    }
};
/** 加载更多 */
const onLoad = async () => {
    getList();
    queryParams.value.pageNum++;
};
/** 下拉 */
const onRefresh = () => {
    if (refreFlag.value) {
        refreFlag.value = false
        finished.value = false; // 清空列表数据
        refreshing.value = false;
        loading.value = true; // 加载状态
        queryParams.value.pageNum = 1; // 分页数赋值为1
        list.value = []; // 清空数组
        onLoad(); // 重新加载数据
    } else {
        finished.value = false;
        refreshing.value = false;
    }
};
</script>
<style lang="less" scoped>
.listingRecord {
    width: 100%;
    height: calc(100vh - 94px);
    background-color: #F6FAFF;

    .liveStreamingMechanisms {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 20px;
        background: #0094FF;
        border-radius: 2px 0px 2px 0px;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
        text-align: center;
        line-height: 20px;
    }

    .product_list_serch-text {
        display: flex;
        align-items: center;
        width: 100%;
        background: #f6faff;
        height: 34px;
        margin-bottom: 10px;
        padding-top: 10px;
        position: relative;

        :deep(.van-search__field) {
            background-color: #fff;
            border-radius: 20px;
            padding-left: 10px;
        }

        .product_list_serch1 {
            display: flex;
            align-items: center;
            background: #f6faff;
            width: 85%;
            height: 34px;
            position: relative;

            :deep(.van-search__content) {
                height: 35px;
                padding-left: 0 !important;
            }

            :deep(.van-search__field) {
                height: 35px;
            }
        }

        .product_list_serch2 {
            display: flex;
            width: 50px;
            left: -10px;
            justify-content: center;
            align-items: center;

            .product_list-btn {
                width: 54px;
                height: 26px;
                font-size: 14px;
                color: #ffffff;
                border: none;
                background: #0094ff;
                white-space: nowrap;
                position: absolute;
                top: 14px;
                left: 66%;
            }

            .product_list-btn-screen {
                display: flex;
                display: flex;
                align-items: center;
            }

            .product_list-btn-screen-image {
                width: 13px;
                height: 15px;
                background-image: url("@/assets/home/icon_shaixuan.png");
                background-size: 100% 100%;
                //   background-size: 100% 100%;
            }

            .product_list-btn-screen-text {
                display: flex;
                align-items: center;
                height: 18px;
                font-size: 14px;
                color: #1a1b1c;
                margin-left: 5px;
            }
        }
    }

    .mongolian_layer {
        width: 100%;
        height: calc(100vh - 144px);
        position: absolute;

        .mongolian_layer_layer {
            width: 100%;
            height: calc(100% - 540px);
            position: absolute;
            z-index: 6000;
            background: #000000;
            opacity: 0.73;
            margin-top: 540px;

        }

        .mongolian_layer_options {
            width: 100%;
            height: 540px;
            background: #FFFFFF;
            // display: flex;
            // justify-content: space-around;
            // align-items: center;
            position: absolute;
            z-index: 6001;
            // flex-wrap: wrap;
            // padding: 15px;
            // box-sizing: border-box;
            // align-content: flex-start;
            // overflow: auto;

            .prices {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                margin-bottom: 20px;
                margin-top: 10px;
                box-sizing: border-box;
            }

            .title {
                width: 100%;
            }

            .titles {}

            .custom-button {
                width: 24px;
                height: 24px;
                background-color: var(--van-primary-color);
                border-radius: 24px;
            }

            .price_title {
                position: absolute;
                top: -20px;
                left: -10px;
            }

            .price_titles {
                width: 100px;
                top: -20px;
                position: absolute;
            }

            .price_pre {
                width: 100%;
                height: 75px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                margin-top: 20px;
                align-content: space-between;
                margin-bottom: 20px;

                .price_div {
                    width: 108px;
                    height: 30px;
                    border-radius: 15px;
                    border: 1px solid #B8BECA;
                    font-weight: 400;
                    font-size: 14px;
                    color: #B8BECA;
                    text-align: center;
                    line-height: 30px;
                    box-sizing: border-box;
                }

                .price_div_avtive {
                    width: 108px;
                    height: 30px;
                    border-radius: 15px;
                    background: #0094FF;
                    font-weight: 400;
                    font-size: 14px;
                    color: #fff;
                    text-align: center;
                    line-height: 30px;
                }
            }

            .shelf_type {
                width: 100%;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 20px;
                margin-bottom: 20px;

                .shelf_div {
                    width: 78px;
                    height: 30px;
                    border-radius: 15px;
                    border: 1px solid #B8BECA;
                    font-weight: 400;
                    font-size: 14px;
                    color: #B8BECA;
                    text-align: center;
                    line-height: 30px;
                    box-sizing: border-box;
                }

                .shelf_div_avtive {
                    width: 78px;
                    height: 30px;
                    border-radius: 15px;
                    background: #0094FF;
                    font-weight: 400;
                    font-size: 14px;
                    color: #fff;
                    text-align: center;
                    line-height: 30px;
                }

                .area_div {
                    width: 48px;
                    height: 30px;
                    border-radius: 15px;
                    border: 1px solid #B8BECA;
                    font-weight: 400;
                    font-size: 14px;
                    color: #B8BECA;
                    text-align: center;
                    line-height: 30px;
                    box-sizing: border-box;
                }

                .area_div_avtive {
                    width: 48px;
                    height: 30px;
                    border-radius: 15px;
                    background: #0094FF;
                    font-weight: 400;
                    font-size: 14px;
                    color: #fff;
                    text-align: center;
                    line-height: 30px;
                }
            }

            .anthor_type {
                height: auto !important;
                flex-wrap: wrap;

                .anthor_type_div {
                    width: calc(100% / 3) !important;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .shelf_div {
                    margin-bottom: 10px;
                    width: 108px !important;
                }

                .shelf_div_avtive {
                    margin-bottom: 10px;
                    width: 108px !important;
                }


            }

            .anthor_types {
                justify-content: flex-start !important;
            }

            .date_shelf {
                width: 100%;
                height: 34px;
                display: flex;
                position: relative;
                justify-content: space-between;
                align-items: center;
                margin-top: 20px;
                margin-bottom: 20px;

                .date_shelf_div {
                    width: 159px;
                    height: 34px;
                    border-radius: 17px;
                    border: 1px solid #B8BECA;
                    position: relative;
                    text-align: center;
                    line-height: 34px;

                    .menu_cions {
                        position: absolute;
                        width: 14px;
                        height: 14px;
                        top: 10px;
                        left: 15px;
                    }

                    .title {
                        font-weight: 400;
                        font-size: 14px;
                        color: #B8BECA;
                    }
                }

                .div {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }

            .mongolian_layer_div {
                height: calc(100% - 70px);
                width: 100%;
                overflow: auto;
                background: #FFFFFF;
                display: flex;
                justify-content: space-around;
                align-items: center;
                position: absolute;
                z-index: 6001;
                flex-wrap: wrap;
                padding: 15px 15px 0 15px;
                box-sizing: border-box;
                align-content: flex-start;
            }

            .buttons {
                margin-top: 20px;
                width: 100%;
                height: 44px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: absolute;
                bottom: 10px;

                .reset {
                    width: 162px;
                    height: 44px;
                    border-radius: 23px;
                    border: 1px solid #0094FF;
                    text-align: center;
                    line-height: 44px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #0094FF;
                }

                .submit {
                    width: 162px;
                    height: 44px;
                    border-radius: 23px;
                    background: #0094FF;
                    text-align: center;
                    line-height: 44px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #fff;
                }
            }
        }
    }

    .screen {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        height: 44px;
        width: 100%;
        padding: 27px;
        line-height: 44px;
        background-color: #fff;

        .screen_div {
            display: flex;
            align-items: center;
            width: 35%;
            display: flex;
            justify-content: center;

            .screen_child {
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
            }

            .screen_icon {
                display: flex;
                flex-wrap: wrap;
                width: 10px;
                height: 16px;
                margin-left: 5px;

                .screen_icons {
                    width: 10px;
                    height: 6px;
                }
            }
        }
    }

    :deep(.van-pull-refresh) {
        height: calc(100vh - 198px);
        overflow: scroll;
    }

    .nothing_div {
        width: 100%;
        margin: auto;
        text-align: center;
        margin-top: 20vh;
        font-weight: 400;
        font-size: 12px;
        color: #B8BECA;
        line-height: 12px;
        flex-wrap: wrap;

        .van-image {
            width: 160px;
            height: 160px;
        }
    }

    .conent_pre {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
        background-color: #fff;
        margin-top: 10px;

        .conent_pre_header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .conent_pre_img {
                width: 90px;
                height: 90px;

                .van-image {
                    width: 90px;
                    height: 90px;

                    :deep(.van-image__img) {
                        border-radius: 5px !important;
                    }
                }
            }

            .conent_pre_des {
                width: calc(100% - 90px);
                height: 90px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                padding-left: 10px;
                align-content: space-around;

                .contnt_title {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;



                    .contnt_styleName {
                        font-weight: 400;
                        font-size: 14px;
                        color: #1A1B1C;
                        width: 150px;
                        height: 20px;
                        white-space: nowrap;
                        /* 确保文本在一行内显示 */
                        overflow: hidden;
                        /* 隐藏溢出的内容 */
                        text-overflow: ellipsis;
                    }

                    .contnt_type {
                        font-weight: 400;
                        font-size: 12px;
                        color: #B8BECA;
                    }

                    .contnt_status {
                        width: 67px;
                        height: 26px;
                        background: #E7FDEE;
                        border-radius: 2px;
                        font-weight: 400;
                        font-size: 14px;
                        color: #19D11B;
                        text-align: center;
                        line-height: 26px;
                    }

                    .inventory {
                        display: flex;
                        align-items: center;
                        font-size: 12px;
                        color: #B8BECA;

                        .colors {
                            color: #0094FF !important;
                            margin-top: 1px;
                            margin-right: 2px;
                        }
                    }

                }

                .contnt_mechanism {
                    width: 100%;
                    font-weight: 400;
                    font-size: 12px;
                    color: #B8BECA;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .contnt_bottom {
                    width: 100%;
                    height: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    color: #B8BECA;

                    .inventory {
                        font-weight: 400;
                        font-size: 12px;
                        color: #1A1B1C;
                    }

                    .goodShelves_colors {
                        font-weight: 500;
                        font-size: 14px;
                        color: #19D11B;
                    }
                }
            }
        }

        .product_details {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            margin-top: 10px;

            .listing_person {
                width: 90px;
            }

            .product_details_right {
                width: calc(100% - 90px);
                display: flex;
                align-items: center;
                justify-content: space-between;
                box-sizing: border-box;
                padding-left: 10px;
            }

            .more {
                font-weight: 400;
                font-size: 12px;
                color: #B8BECA;
            }
        }

        .product_detail_title-content-info {
            margin-top: 20px;
            display: flex;

            .product_detail_title-content-info-name {
                font-weight: 400;
                font-size: 14px;
                color: #1a1b1c;
                line-height: 14px;
                width: 90px;
            }

            .colors {
                color: #0094FF !important;
            }

            .product_detail_title-content-info-content {
                font-weight: 400;
                font-size: 14px;
                color: #b8beca;
                line-height: 14px;
                margin-left: auto;
                width: calc(100% - 75px);
                display: flex;
                justify-content: flex-end;
                word-break: break-all;
            }

        }

    }

    :deep(.van-slider) {
        width: 90%;
    }

    :deep(.van-slider__button) {
        background-color: #0094FF !important;
    }
}
</style>